<template>
<view class="bankCard-list-box padding">
  
  <view class="bankCard-card padding radius shadow shadow-lg bg-mask margin-top" :style="{backgroundImage: url(BASE_URL + item.icon)}" v-for="(item, index) in bankCardList" :key="index">
    <view class="title text-white">
      <view class="text-xl">{{item.title}}</view>
      <view>储蓄卡</view>
    </view>
    <view class="number text-center margin-tb text-white text-xl">{{item.cardnumber}}</view>
  </view>

  <view class="add-box bg-white radius text-center padding-tb margin-top" @tap="gotoAddBankCard">
    <view class="add-btn text-sl">
      <text class="cuIcon-roundaddfill text-orange"></text>
    </view>
    <view class="text-black">添加银行卡</view>
  </view>
</view>
</template>

<script>
import { mapGetters } from 'vuex'

export default {
  name: 'bankCard-list',
  data () {
    return {
      bankCardList: null
    }
  },
  computed: {
    ...mapGetters([
      'BASE_URL'
    ]),
    hasData() {
      return this.bankCardList !== null && this.bankCardList.length !== 0
    },
    bankIcon() {
      return this.BASE_URL + '/assets/img/pay_icon.png'
    }
  },
  created() {
    this.getUserBankCard()
  },
  methods: {
    getUserBankCard() {
      this.$api.getUserBankCard({type: 0}).then(res => {
        console.log('用户银行卡', res)
        if (!res) return
        const resData = res.data
        this.bankCardList = resData
      })
    },
    gotoAddBankCard() {
      this.$Router.push({ name: 'bankCard-add' })
    }
  }
}
</script>

<style lang="less">
.bankCard-card,
.add-box {
  border-radius: 20rpx;
}

.bankCard-card {
  background-image: url('/static/logo.png');
  background-position: 90% center;
  background-repeat: no-repeat;
  background-size: contain;

  &.bg-mask {
    background-color: #fff;
  }
}
</style>
